<template>
  <div class="wrap">
    <mpvue-echarts :echarts="echarts" :onInit="onInit" type="2d"/>
  </div>
</template>

<script>
import * as echarts from "echarts/dist/echarts.simple.min";
import mpvueEcharts from "mpvue-echarts";
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    color: ["#3398DB"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: ["安全帽", "工服", "区域入侵", "人脸对比"],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "#666"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#999"
          }
        }
      }
    ],
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: "#999"
        }
      }
    },
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "40%",
        data: [10, 52, 12, 40],
        itemStyle: {
          color: "#1989fa"
        }
      }
    ]
  };
  chart.setOption(option);
  return chart;
}
export default {
  data() {
    return {
      echarts,
      onInit: initChart
    };
  },
  components: {
    mpvueEcharts
  },
  onShareAppMessage() {}
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 250px;
}
</style>